<template>
    <div id="chart-container">
      <svg ref="svgRef"></svg>
    </div>
  </template>
  
  <script setup>
  import * as d3 from 'd3';
  import { ref, onMounted } from 'vue';
  
  const svgRef = ref(null);
  const data = [10, 20, 30, 40, 50]; // 示例数据
  
  onMounted(() => {
    const svg = d3.select(svgRef.value);
    const width = 500;
    const height = 300;
    const margin = { top: 20, right: 20, bottom: 30, left: 40 };
  
    // 创建一个比例尺
    const xScale = d3.scaleLinear()
      .domain([0, data.length - 1])
      .range([0, width - margin.left - margin.right]);
  
    const yScale = d3.scaleLinear()
      .domain([0, d3.max(data)])
      .range([height - margin.top - margin.bottom, 0]);
  
    // 创建一个线条生成器
    const line = d3.line()
      .x((d, i) => xScale(i))
      .y((d) => yScale(d));
  
    // 在SVG中添加路径元素
    svg.attr('width', width)
      .attr('height', height)
      .append('g')
      .attr('transform', `translate(${margin.left},${margin.top})`)
      .append('path')
      .datum(data)
      .attr('fill', 'none')
      .attr('stroke', 'steelblue')
      .attr('stroke-width', 2)
      .attr('d', line);
  });
  </script>
  
  <style>
  #chart-container {
    text-align: center;
  }
  </style>
  